<template>
	<view>
		
		<!-- 底部订阅弹框 -->
		<uni-popup ref="selectPopup" :mask-click="true" type="bottom">
			<view class="pyq-box">
				<view class="pyq-box-top">
					<view class=""></view>
					<view class="">订阅须知</view>
					<image @click="$refs.selectPopup.close('bottom')" src="/static/image/activity/cancle.png" mode="">
					</image>
				</view>
				<view class="dingTxt" style="margin-top:38rpx;">1.订阅后，您可以查看空间内相关内容；</view>
				<view class="dingTxt">2.本空间由空间达人自行创建，订阅空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；</view>
				<view class="dingTxt">3.虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行订阅；</view>
				<view class="dingTxt">4.本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。</view>
		
			</view>
		</uni-popup>
		
		<!-- 还没创建空间 需要点击达人认证 -->
		<view class="space-box" v-show="isRen == 0">
			<image src="/static/image/no-data.png" mode=""></image>
			<view class="space-box-txt">
				你还没有创建空间哦~
			</view>
			<view class="space-box-btn" @click="cj">
				立即创建
			</view>
		</view>
		<!-- 别人看到的达人空间 -->
		<view class="" v-show="isRen == 1">
			<view class="info_bg">
				<!-- <image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image> -->
				<view class="info-content">
					<view class="info-msg">
						<view class="flex">
							<view class="activing">
								<image src="/static/image/Index/index-active2.png" mode="" class="active_img"></image>
								<image src="/static/image/Index/index-zaixian.png" mode="" class="activezx"></image>
							</view>
							<view class="flex tai-box justify-between">
								<view class="">
									<view class="tai-box-title">
										154
									</view>
									<view class="tai-box-bottom">
										动态
									</view>
								</view>
								<view class="">
									<view class="tai-box-title">
										6542
									</view>
									<view class="tai-box-bottom">
										获赞
									</view>
								</view>
							</view>
						</view>

						<view class="info-list">
							<view class="flex" style="align-items: center;">
								<view class="info-name">超可爱宝贝</view>
								<view class="info-da">达人</view>
								<!-- <image src="/static/image/Index/girl-icon.png" mode="" class="info-sex"></image> -->
								<image src="/static/image/Index/VIP-icon.png" mode="" @click="openVip" class="info-vip">
								</image>
								<image class="info-right" src="/static/image/right.png" mode=""></image>
							</view>
							<view class="flex " style="align-items: center;margin-top: 10rpx;">
								<view class="info-copy">
									<image src="/static/image/Index/girl-icon.png" mode=""></image>
									创建于2025-05-13
								</view>
								<view class="info-right-txt"  @click="$refs.selectPopup.open('bottom')">
									空间权益与福利
								</view>
								<image src="/static/image/Index/index-space-warn.png" mode="" class="name-warnicon"></image>
							</view>

							<view class="info-st">长期更新作品哦，绝对真实本人露脸私拍图片+视频！
								空间内均为本人高清私服作品！
								守护勋章免费看所有贴！</view>
							<view class="info-bottom flex justify-between">
								<view class="flex">
									<image src="/static/image/mine/info-1.png" mode=""></image>
									<view class="">
										<view class="info-bottom-title">
											亲密交流
										</view>
										<view class="info-bottom-bz">
											随时与达人亲密交流
										</view>
									</view>
								</view>
								<view class="flex">
									<image src="/static/image/mine/info-2.png" mode=""></image>
									<view class="">
										<view class="info-bottom-title">
											私密动态
										</view>
										<view class="info-bottom-bz">
											掌握达人更加私密动态
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="infocontent_List">
						<view class="commFilter" @click="handlePhotoAlbum">
							<view class="filterTxt">最近更新</view>
							<image src="/static/image/Index/index-filter-left.png" class="leftFilter" mode=""></image>
						</view>
						<view class="info-photolist">
							<view class="photo-heng">
								<view class="image-container" v-for="(item,index) in photoList.slice(0,3)" :key="index">
									<image :src="item" mode="aspectFill"></image>
									<view class="image-overlay">
										<text v-show="index === 2 ">+{{photoList.length - 3}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="space-title-box flex justify-between">
						<view class="space-title-box-left">
							我加入的空间
						</view>
						<view class="space-title-box-right flex">
							<image src="/static/image/mine/refresh.png" mode=""></image>
							<view class="">
								换一批
							</view>
						</view>
					</view>
					<view class="type-box-find">
						<view class="content_model_find" v-for="(item,index) in 6"
							@click="$helper.to('/pages/tabBar/index/indexInfo')">
							<image src="/static/image/Index/2.png" mode="" class="model_img"></image>
							<span class="model_time_index">最近有更新</span>
							<view class="model_bz">
								草莓墩墩
							</view>
							<view class="model_info">
								<image src="/static/image/Index/index-active2.png" mode="" class="vipimg"></image>
								<view class="info_name_find">
									<view class="">小阿杜</view>
									<view class="info_name_find_bottom">
										<view class="info_name_find_bottom_left">颜值创作者</view>
										<view class="info_name_find_bottom_right">动态:32</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRen: 1, //0未认证 1已认证
				photoList: [
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
				],
			}
		},
		methods: {
			// 创建
			cj() {
				this.$helper.to('/pages/views/mySpace/createSpace')
				return
				let that = this;
				uni.showModal({
					title: '提示',
					content: ' 您还没有进行达人认证，达人认证通过后才能创建空间发布私密动态 ',
					confirmColor: "#000000",
					cancelColor: "#999999",
					confirmText: '申请认证',
					cancelText: '暂不申请',
					success: (res) => {
						if (res.confirm) {
							that.$helper.to('/pages/views/expertCertification/expertCertification')
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}
	.pyq-box {
		width: 100%;
		height: 428rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;
	
		.pyq-box-top {
			display: flex;
			justify-content: space-between;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
	
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.dingTxt{
			font-size: 26rpx;
			color:#000;
			margin:0 50rpx;
			line-height:38rpx;
		}
	}

	.space-box {
		width: 256rpx;
		// height: 310rpx;
		margin: 50rpx auto;
		text-align: center;

		image {
			width: 100%;
			height: 310rpx;
		}

		.space-box-txt {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin: 20rpx 0;
		}

		.space-box-btn {
			width: 240rpx;
			height: 80rpx;
			background: #000000;
			border-radius: 180rpx;
			margin: 0 auto;
			font-weight: 400;
			font-size: 30rpx;
			color: #FEC92F;
			line-height: 80rpx;
		}
	}

	.info_bg {
		width: 100%;
		height: 100vh;
		position: relative;
		// overflow: hidden;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url('/static/image/Index/1.png');

		.info-content {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 80%;
			background: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			// overflow-y: auto;

			.info-msg {
				// display: flex;
				margin: 40rpx 30rpx;
			}

			.activing {
				position: relative;
				display: inline-block;
				margin-right: 24rpx;
				width: 160rpx;
				height: 160rpx;
			}

			.active_img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.activezx {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				position: absolute;
				bottom: 0;
				right: 0;
			}

			.tai-box {
				width: 300rpx;
				text-align: center;
				margin-left: 120rpx;
				align-items: center;

				.tai-box-title {
					font-weight: 500;
					font-size: 40rpx;
					color: #000000;
				}

				.tai-box-bottom {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 6rpx;
				}
			}

			// .info-list {
			// 	margin-right: 72rpx;
			// }

			.info-da {
				width: 68rpx;
				height: 32rpx;
				background: #000000;
				border-radius: 90rpx;
				text-align: center;
				border-radius: 10rpx;
				line-height: 32rpx;
				font-size: 20rpx;
				color: #fff;
				margin: 0 10rpx 0 10rpx;
			}

			.info-name {
				width: 200rpx;
				font-size: 40rpx;
				color: #000;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info-right {
				width: 20rpx;
				height: 22rpx;
				margin-left: 10rpx;
			}

			.info-sex {
				width: 16rpx;
				height: 24rpx;
				margin: 0 18rpx;
			}

			.info-vip {
				width: 54rpx;
				height: 28rpx;
			}

			.info-st {
				font-size: 24rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-top: 10rpx;
			}

			.info-copy {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				image {
					width: 16rpx;
					height: 24rpx;
					margin-right: 14rpx;
				}
			}
			.info-bottom{
				align-items: center;
				margin-top: 10rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
				}
				.info-bottom-title{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.info-bottom-bz{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.info-right-txt {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-left:236rpx;
			}
			.name-warnicon{
				width:24rpx;
				height:24rpx;
				margin-left:12rpx;
			}
			.space-title-box {
				padding: 0 25rpx;
				align-items: center;
				margin-top: 10rpx;

				.space-title-box-left {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}

				.space-title-box-right {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;

					image {
						width: 30rpx;
						height: 24rpx;
						margin: 9rpx 10rpx 0 0;
					}
				}
			}

			.type-box-find {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 20rpx;
			}

			.content_model {
				position: relative;
				height: 420rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.content_model_find {
				position: relative;
				height: 420rpx;
				margin-bottom: 20rpx;

			}

			.model_img {
				width: 335rpx;
				height: 420rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}

			.model_time_index {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				text-align: center;
				width: 150rpx;
				line-height: 40rpx;
				height: 40rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
				color: #ffffff;
				background: rgba(0, 0, 0, 0.6);
			}

			.model_time {
				position: absolute;
				width: 36rpx;
				height: 36rpx;
				right: 20rpx;
				top: 20rpx;
				border-radius: 50%;
			}

			.model_bz {
				position: absolute;
				bottom: 80rpx;
				left: 16rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				width: 296rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.model_info {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 10rpx;
				left: 12rpx;
				font-weight: 500;
			}

			.info_name {
				width: 96rpx;
				font-size: 20rpx;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info_name_find {
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.info_name_find_bottom {
				display: flex;
			}

			.info_name_find_bottom_left {
				font-weight: 400;
				font-size: 20rpx;
				color: #FEC92F;
			}

			.info_name_find_bottom_right {
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				margin-left: 15rpx;
			}

			.info_name_three {
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.info_name_three_bottom {
				display: flex;
				margin-left: 90rpx;
				align-items: center;
			}

			.info_name_three_bottom_left {
				width: 24rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}

			.info_name_three_bottom_right {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.vipimg {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.infocontent_List {
				margin: 0 30rpx;
			}

			.commFilter {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.filterTxt {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.leftFilter {
				width: 12rpx;
				height: 22rpx;
			}

			.info-photolist {
				display: flex;
				margin-top: 24rpx;
			}

			.photo-heng {
				display: flex;
				align-items: center;

				.image-container {
					position: relative;
					margin-right: 16rpx;

					image {
						width: 219rpx;
						height: 316rpx;
						border-radius: 12rpx;
						display: block;
					}

					.image-overlay {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: rgba(0, 0, 0, 0.8);
						/* 深色半透明 */
						backdrop-filter: blur(6px);
						/* 可选：背景模糊 */
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
		}


		// .back-img {
		// 	width: 18rpx;
		// 	height: 32rpx;
		// 	position: absolute;
		// 	top: 50rpx;
		// 	left: 30rpx;
		// 	z-index: 9999;

		// 	image {
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
	}
</style>